<template>
  <div class="date-panel-warp">
    <div class="dates-row" @click="togglePicker">
      <span v-if="checkDates.length===0" class="date-placeholder">请选择日期</span>
      <span v-for="(item,i) in checkDates" :key="i" class="date-cell-card">
        {{ item }}
        <i class="iconfont icon-close" @click.stop="delCheckDate(i)" />
      </span>
      <span v-if="checkDates.length>0" class="iconfont icon-close" @click="delAll()" />
      <span v-if="checkDates.length===0" class="iconfont icon-calendar" />
    </div>
    <transition name="dialog-slide">
      <div v-show="isShowPicker" class="date-picker">
        <div v-show="!isShow&&!isYear" class="date-picker-container">
          <div class="date-picker-header">
            <span class="iconfont icon-left" @click.stop="prevMonth" />
            <span class="date-info">
              <span class="picker-span" @click.stop="showCheckYear">{{ viewDate.year }}年 </span>
              <span class="picker-span" @click.stop="isShow=true"> {{ viewDate.month }}月</span>
            </span>
            <span class="iconfont icon-right" @click.stop="nextMonth" />
          </div>
          <div class="data-picker-table">
            <table class="picker-table">
              <thead>
                <tr>
                  <td v-for="day in days" :key="day">{{ day }}</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(row,y) in dates" :key="y">
                  <td v-for="(cell,x) in row" :key="x" :class="viewDate.month===cell.month?'is-curMonth':'not-curMonth'">
                    <span :class="{active:isSelected(cell)}" @click.stop="checkDate(cell)">
                      <div class="solar-text">{{ cell.date }}</div>
                      <div class="lunar-text">{{ cell | fmtLunar }}</div>
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div v-show="isShow" class="picker-month">
          <div class="date-picker-header">
            <span class="iconfont icon-left" @click.stop="prevYear" />
            <span class="date-info">
              <span>{{ viewDate.year }}年 </span>
            </span>
            <span class="iconfont icon-right" @click.stop="nextYear" />
          </div>
          <div class="picker-month-table">
            <table>
              <tr v-for="(row,k) in months" :key="k">
                <td v-for="(m,i) in row" :key="i">
                  <span :class="{active:m===viewDate.month}" @click.stop="checkMonth(m)">{{ m }}月</span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div v-show="isYear" class="picker-year">
          <div class="date-picker-header">
            <span class="iconfont icon-left" @click.stop="prevYearView" />
            <span class="date-info">
              <span v-if="years.length>0">{{ years[0][0] }}年-{{ years[3][3] }}年 </span>
            </span>
            <span class="iconfont icon-right" @click.stop="nextYearView" />
          </div>
          <div class="date-picker-year">
            <table class="picker-year-table">
              <tr v-for="(row,k) in years" :key="k">
                <td v-for="(y,i) in row" :key="i">
                  <span :class="{active:y===viewDate.year}" @click.stop="checkYear(y)">{{ y }}年</span>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import calendar from '../../../components/calendar'
export default {
  name: 'DatePanel',
  filters: {
    fmtLunar(date) {
      const lunar = calendar.solar2lunar(date.year, date.month, date.date)
      return lunar.lDay === 1 ? lunar.IMonthCn : lunar.IDayCn
    }
  },
  model: {
    model: {
      prop: 'value',
      event: 'change'
    }
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dates: [],
      days: ['日', '一', '二', '三', '四', '五', '六'],
      select: {
        year: null,
        month: null,
        date: null
      },
      isShow: false,
      isYear: false,
      months: [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [10, 11, 12]
      ],
      years: [],
      viewDate: {
        year: 2020,
        month: 11
      },
      isShowPicker: false,
      date: '',
      checkDates: []
    }
  },
  watch: {
    value(val) {
      this.checkDates = val
    }
  },
  created() {
    const now = new Date()
    const year = now.getFullYear()
    const month = now.getMonth() + 1
    this.viewDate = { year, month }
    this.dates = this.getMonthView(year, month)
    this.checkDates = this.value
  },
  methods: {
    getMonthView(year, month) {
      const firstDate = new Date(year, month - 1, 1, 0, 0, 0, 0)
      const oneDay = 24 * 3600 * 1000
      const firstViewDate = new Date(firstDate - (firstDate.getDay() * oneDay))
      const viewsDate = []
      let week = []
      for (let i = 0; i < 42; i++) {
        const item = new Date(firstViewDate.getTime() + (i * oneDay))
        const day = item.getDay()
        const dateCell = {
          year: item.getFullYear(),
          month: item.getMonth() + 1,
          date: item.getDate(),
          day: item.getDay()
        }
        week.push(dateCell)
        if (week.length > 7) {
          week.shift()
        }
        if (day === 6) {
          if ((week[0].month === month) || (week[week.length - 1].month === month)) {
            viewsDate.push(week)
          }
          week = []
        }
      }
      return viewsDate
    },
    checkMonth(month) {
      this.viewDate.month = month
      this.dates = this.getMonthView(this.viewDate.year, month)
      this.isShow = false
    },
    getYearView(minYear) {
      const years = []
      let row = []
      for (let i = 1; i <= 16; i++) {
        if (i % 4 === 0) {
          row.push(minYear + i)
          years.push(row)
          row = []
        } else {
          row.push(minYear + i)
        }
      }
      this.years = years
    },
    checkYear(year) {
      this.viewDate.year = year
      this.dates = this.getMonthView(this.viewDate.year, this.viewDate.month)
      this.isYear = false
    },
    showCheckYear() {
      this.getYearView(this.viewDate.year - 7)
      this.isYear = true
    },
    prevYearView() {
      const minYear = this.years[0][0] - 17
      this.getYearView(minYear)
    },
    nextYearView() {
      const minYear = this.years[3][3]
      this.getYearView(minYear)
    },
    nextMonth() {
      const next = this.viewDate.month + 1
      if (next > 12) {
        this.viewDate.year += 1
        this.viewDate.month = 1
      } else {
        this.viewDate.month = next
      }
      this.dates = this.getMonthView(this.viewDate.year, this.viewDate.month)
    },
    prevMonth() {
      const prev = this.viewDate.month - 1
      if (prev < 1) {
        this.viewDate.year -= 1
        this.viewDate.month = 12
      } else {
        this.viewDate.month = prev
      }
      this.dates = this.getMonthView(this.viewDate.year, this.viewDate.month)
    },
    checkDate(date) {
      const time = date.year + '-' + date.month + '-' + date.date
      const index = this.checkDates.indexOf(time)
      if (index === -1) {
        this.checkDates.push(time)
      } else {
        this.checkDates.splice(index, 1)
      }
      this.$emit('change', this.checkDates)
    },
    nextYear() {
      this.viewDate.year += 1
      this.dates = this.getMonthView(this.viewDate.year, this.viewDate.month)
    },
    prevYear() {
      this.viewDate.year -= 1
      this.dates = this.getMonthView(this.viewDate.year, this.viewDate.month)
    },
    togglePicker() {
      const _this = this
      function hide() {
        _this.isShowPicker = false
        document.removeEventListener('click', hide, false)
      }
      if (!_this.isShowPicker) {
        _this.isShowPicker = true
        _this.isShow = false
        _this.isYear = false
        const timeout = setTimeout(() => {
          document.addEventListener('click', hide, false)
          clearTimeout(timeout)
        }, 10)
      } else {
        hide()
      }
    },
    isSelected(day) {
      const date = day.year + '-' + day.month + '-' + day.date
      if (this.checkDates.indexOf(date) !== -1) {
        return true
      }
      return false
    },
    delCheckDate(i) {
      this.checkDates.splice(i, 1)
      this.$emit('change', this.checkDates)
    },
    delAll() {
      this.checkDates.splice(0, this.checkDates.length)
      this.$emit('change', this.checkDates)
    },
    setCalendarView(date) {
      if (date) {
        const [year, month] = date.split('-')
        this.viewDate = {
          year: Number(year),
          month: Number(month)
        }
        this.dates = this.getMonthView(this.viewDate.year, this.viewDate.month)
      }
    }
  }
}
</script>

<style scoped>
  .date-panel-warp{
    display: block;
    position: relative;
  }
  .date-picker{
    background-color: #ffffff;
    border-radius: 4px;
    width: 294px;
    padding: 10px;
    z-index: 9;
    border: 1px solid #eaeaea;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 10px;
  }
  .picker-table{
    border-collapse:collapse;
  }
  .picker-table td{
    width: 24px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
  }
  .picker-table td span{
    display: inline-block;
    width: 40px;
    cursor: pointer;
    border-radius: 4px;
    line-height: 20px;
    vertical-align: middle;
    padding: 5px 0;
  }
  .solar-text{
    line-height: 1.2;
  }
  .lunar-text{
    font-size: 12px;
    line-height: 1.2;
  }
  .picker-table td span:hover{
    background-color: #f2f2f2;
  }
  .picker-table td.is-curMonth{
    color: #606266;
  }
  .picker-table td.not-curMonth{
    color: #a3acb3;
  }
  .picker-table td.is-curMonth span.active{
    color: #3a8ee6;
    background-color: rgba(58, 142, 230, 0.12);
  }
  .picker-table td.not-curMonth span.active{
    background-color: #ebebeb;
  }
  .date-picker-header{
    height: 30px;
    position: relative;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
  }
  .date-picker-header .iconfont{
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    color: #606266;
    cursor: pointer;
  }
  .date-picker-header .icon-left{
    left: 0;
    top: 0;
  }
  .date-picker-header .icon-right{
    right: 0;
    top: 0;
  }
  .picker-month-table table{
    width: 100%;
    border-collapse:collapse;
  }
  .picker-month-table table td{
    width: 33.33333333%;
    font-size: 12px;
    color: #606266;
    height: 24px;
    text-align: center;
  }
  .picker-year-table td{
    width: 25%;
    font-size: 12px;
    color: #606266;
    text-align: center;
  }
  .picker-month-table table td span,
  table.picker-year-table td span{
    display: block;
    width: 100%;
    height: 24px;
    line-height: 24px;
    cursor: pointer;
    border-radius: 4px;
  }
  .picker-month-table table td span:hover,
  table.picker-year-table td span:hover{
    background-color: #f2f2f2;
  }
  .picker-month-table table td span.active,
  table.picker-year-table td span.active{
    color: #3a8ee6;
    background-color: rgba(58, 142, 230, 0.12);
  }
  .picker-year-table{
    width: 100%;
    border-collapse:collapse;
  }
  .picker-span{
    cursor: pointer;
  }
  .dialog-slide-enter-active, .dialog-slide-leave-active {
    transition: all .2s;
  }
  .dialog-slide-leave-to,.dialog-slide-enter{
    opacity: 0;
    margin-top: -20px;
  }
  .date-cell-card{
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    padding: 3px 20px 3px 5px;
    border-radius: 4px;
    color: #666666;
    background-color: #f4f4f4;
    margin: 5px;
    position: relative;
  }
  .date-cell-card i{
    position: absolute;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #a8a8a8;
    border-radius: 10px;
    cursor: pointer;
    top: 3px;
    right: 0;
  }
  .date-cell-card i:hover{
    color: #3a8ee6;
  }
  .dates-row{
    min-height: 36px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding-right: 25px;
    position: relative;
  }
  .dates-row:focus,.dates-row:hover{
    border: 1px solid #3a8ee6;
  }
  .dates-row span.icon-close{
    position: absolute;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #a8a8a8;
    border-radius: 10px;
    cursor: pointer;
    top: 8px;
    right: 5px;
  }
  .dates-row span.icon-calendar{
    position: absolute;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 16px;
    color: #777777;
    border-radius: 10px;
    cursor: pointer;
    top: 8px;
    right: 5px;
  }
  .dates-row span.icon-close:hover{
    background-color: #f2f2f2;
    border-radius: 10px;
  }
  .date-placeholder{
    display: inline-block;
    margin: 3px 5px 3px 10px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #dbdbdb;
    user-select: none;
  }
</style>
